<!-- BOM管理--弹窗选择BOM操作 -->
<script lang="ts">
import { queryBomComListSelectV1 } from "/@/api/basic/bom";
import { reactive, watch } from "vue";
// import { errorMessage, alertMessage } from "/@/utils/message";
// import { successMessage } from "/@/utils/message";
// import { ElTable } from "element-plus";
// import { ElForm } from "element-plus";
export default {
  name: "subItemData",
  props: {
    dialogShow: {
      type: Boolean,
      default: false
    }
  },
  setup(props, ctx) {
    // 选择料号弹窗绑定数据
    const subItemData = reactive({
      dialogShow: false, //操作显示隐藏
      loading: false, //加载
      detailData: [] as any[],
      data: {} as any,
      bomComId: 0,
      name: "", //品名
      totalCount: 0, //总数
      formData: {
        code: "",
        name: "",
        pageNum: 1, //页码
        pageRow: 15 //每页条数
      }
    });
    watch(props, n => {
      subItemData.dialogShow = n.dialogShow;
      if (subItemData.dialogShow) {
        subItemData.detailData = [];
        querySelectV1();
      }
    });

    const querySelectV1 = () => {
      subItemData.loading = true;
      queryBomComListSelectV1(subItemData.formData).then((res: any) => {
        if (res.code == 0) {
          subItemData.detailData = res.data && res.data.list;
          subItemData.totalCount = res.data && res.data.total;
        }
        subItemData.loading = false;
      });
    };
    const handleSizeChange = val => {
      //改变每页数量
      subItemData.formData.pageRow = val;
      handleFilter(1);
    };
    const handleCurrentChange = val => {
      //改变页码
      handleFilter(val);
    };
    const handleFilter = val => {
      //查询事件
      subItemData.formData.pageNum = val;
      querySelectV1();
    };
    const chooseBomSure = () => {
      ctx.emit(
        "searchEvent",
        subItemData.bomComId,
        subItemData.name,
        subItemData.data
      );
      chooseBomClose();
    };
    const chooseBomClose = () => {
      subItemData.dialogShow = false;
      subItemData.detailData = [];
      subItemData.formData = {
        code: "",
        name: "",
        pageNum: 1, //页码
        pageRow: 15 //每页条数
      };
      subItemData.totalCount = 0; //总数
      ctx.emit("chooseBomClose");
    };

    const handleSelectionChange = val => {
      subItemData.data = val && val;
      subItemData.bomComId = val && val.bomComId;
      subItemData.name = val ? val.name : subItemData.name;
    };
    const dobuleClick = val => {
      handleSelectionChange(val);
      ctx.emit(
        "searchEvent",
        subItemData.bomComId,
        subItemData.name,
        subItemData.data
      );
      chooseBomClose();
    };

    return {
      subItemData,
      querySelectV1,
      handleSizeChange,
      handleCurrentChange,
      handleSelectionChange,
      chooseBomSure,
      chooseBomClose,
      dobuleClick
    };
  }
};
</script>
<template>
  <div>
    <!-- 查看详情 -->
    <el-dialog
      v-model="subItemData.dialogShow"
      title="BOM信息"
      width="70%"
      top="9vh"
      :before-close="chooseBomClose"
      :close-on-click-modal="false"
    >
      <el-form
        ref="insertForm"
        :model="subItemData.formData"
        label-align="right"
        label-width="80px"
      >
        <el-row :gutter="10">
          <el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="10">
            <el-form-item label="品名" prop="name">
              <el-input
                v-model="subItemData.formData.name"
                clearable
                @keyup.enter="querySelectV1"
                placeholder="请输入品名"
                size="small"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="10">
            <el-form-item label="料号" prop="code">
              <el-input
                v-model="subItemData.formData.code"
                @keyup.enter="querySelectV1"
                clearable
                placeholder="请输入料号"
                size="small"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="2" :md="2" :lg="2" :xl="2">
            <el-form-item label-width="0px">
              <el-button type="primary" size="small" @click="querySelectV1"
                >查询</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        stripe
        v-loading="subItemData.loading"
        :data="subItemData.detailData"
        border
        fit
        height="83%"
        size="mini"
        highlight-current-row
        tooltip-effect="dark"
        @row-dblclick="dobuleClick"
        @current-change="handleSelectionChange"
      >
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column
          prop="name"
          label="品名"
          min-width="200"
        ></el-table-column>
        <el-table-column
          prop="code"
          label="料号"
          min-width="120"
        ></el-table-column>
        <el-table-column
          prop="figureNumber"
          label="别名"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="modelNumber"
          label="机型"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="bomType"
          label="财务分类"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="itemCategory"
          label="库存分类"
          min-width="200"
        ></el-table-column>
        <el-table-column
          prop="version"
          label="BOM版本"
          min-width="100"
        ></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="subItemData.formData.pageNum"
        :page-sizes="[10, 15, 20, 30, 40, 50]"
        :page-size="subItemData.formData.pageRow"
        layout="total, sizes, prev, pager, next, jumper"
        :total="subItemData.totalCount"
      ></el-pagination>
      <template #footer>
        <el-button @click="chooseBomClose" size="small">取 消</el-button>
        <el-button
          type="primary"
          size="small"
          v-if="subItemData.bomComId"
          @click="chooseBomSure"
          >确 定</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>
<style scoped>
@import url("/@/style/dialog.css");
</style>
<style>
.mytable-style .vxe-body--column.col-blue {
  background-color: #60b8ff;
  color: #fff;
}
.mytable-style .vxe-body--column.col-orange {
  background-color: #f56c6c;
  color: #fff;
}
</style>
<style lang="scss" scoped>
.vxe-input + .vxe-button,
.vxe-input + .vxe-button--dropdown,
.vxe-button + .vxe-button,
.vxe-button + .vxe-button--dropdown {
  margin-left: 0;
}

.vxe-toolbar.size--medium {
  padding: 10px;
}

.vxe-table--render-default.size--medium {
  margin-top: 12px;
}

.vxe-button.size--medium.type--button {
  margin-left: 1em;
  height: 32px;
}

.text-model {
  &:hover {
    cursor: pointer;
  }
}
.el-date-editor.el-input__inner,
.el-form-item :deep(.el-date-editor.el-input),
.el-select,
.el-input-number {
  width: 100% !important;
}
</style>
